<template>
	<view class="wanl-order-list">
		<view class="navbar">
			<view class="nav-item text-df" v-for="(item, index) in navList" :key="item.state" :class="{ current: tabCurrentIndex === index }" @tap="tabClick(index)">
				{{ item.text }}
			</view>
		</view>
		<wanl-scroll-list ref="list" :option="{page: 1,auto: true,safeArea: true}" @load="load($event,'load')" @refresh="load($event,'refresh')">
			<view class="tab-content">
				<view class="list-scroll-content">
					<!-- 订单列表 -->
					<view class="wanl-coupon">
						<view v-for="(coupon, seat) in cardList" :key="coupon.id" :class="[coupon.status == 1 ? coupon.type : 'wanl-gray']" class="item margin-bj radius-bock" @tap="onDetails(coupon)">
							
							<view class="item-left">
								<image :src="$wanlshop.oss(coupon.goods_image)" mode=""></image>
							</view>
							<view class="item-right padding-bj">
								<view class="shop">
									<view class="name">
									{{coupon.goods_name}}
									</view>
									<view>
										<text class="wlIcon-fanhui2"></text>
									</view>
								</view>
								<view class="title">
									<view class="cu-tag sm radius margin-right-xs tagstyle">
										剩余次数{{coupon.surplus}}
									</view>
									<text class="text-cut wanl-gray text-min">已使用{{coupon.use}}</text>
								</view>
								<view class="content text-min">
									<view class="wanl-gray">
										<view>
											<text class="wlIcon-dot"></text>{{coupon.endtime_text}} 前有效
										</view>
									</view>
									<view class="cu-btn sm round line-colour" v-if="coupon.state == 1" @tap.stop="onApply(coupon.id)">
										立即使用
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</wanl-scroll-list>
	</view>
</template>

<script>
export default {
	data() {
		return {
			cardList:[],
			tabCurrentIndex: 0,
			navList: [
				// 1=正常，2=退款中，3=取消，4=已过期，5=已用完
				{
					state: 1,
					text: '未使用'
				},
				// {
				// 	state: 2,
				// 	text: '退款中'
				// },
				// {
				// 	state: 3,
				// 	text: '取消'
				// },
				{
					state: 4,
					text: '已过期'
				},
				{
					state: 5,
					text: '已使用'
				}
			]
		};
	},
	methods: {
		// 加载数据
		load(paging,key) {
			let index = this.tabCurrentIndex;
			let navItem = this.navList[index];
			let state = navItem.state;
			uni.request({
				url: '/addons/homeking/api.user_thali/lists',
				data: {
					status: state,
					page: paging.page
				},
				success: res => {
					let cardList = res.data.data;
					if(key == 'load') {
						this.cardList = [...this.cardList, ...cardList];
						this.$refs.list.loadSuccess({ list: this.cardList, total: res.data.total });
					} else if(key == 'refresh') {
						this.cardList = cardList;
						this.$refs.list.refreshSuccess({ list: this.cardList, total: res.data.total });
					}
				}
			});
		},
		//顶部tab点击
		tabClick(index) {
			this.tabCurrentIndex = index;
			this.$refs.list.refreshScrollView()
			this.load({page:1},'refresh')
		},
		onApply(id){
			this.$wanlshop.to(`/pages/user/coupon/apply?id=${id}&state=true`);
		},
		onDetails(data){
			this.$wanlshop.to(`/pages/user/thali/detail?id=${data.id}&goods_id=${data.orderinfo.goods_id}`);
		}
	}
};
</script>

<style lang="less" scoped>
page {
	height: 100%;
}
.wanl-coupon {
	.item {
		background-color: #fff;
	}
}
</style>
